<template>
    <div id="CarSharingMenu">
        <ul id="ul1">
          <li>
            <el-input v-model="menuName" placeholder="请输入"></el-input>
          </li>
          <li>
            <el-button type="primary" @click="queryMenuByName">查询</el-button>
            <el-button type="success" v-power functionCode="menu:add" @click="openAddWindow">添加</el-button>
          </li>
        </ul>
        <!-- 表格 -->
        <el-table :row-style="rowStyle" row-key="id" :tree-props="{children:'children'}" :data="menuData" border style="width: 100%;" height="600" >
          <el-table-column fixed prop="id" label="编号">
            <template slot-scope="props">
                <template v-if="props.row.menuType==2">
                    功能
                </template>
                <template v-if="props.row.menuType==1">
                    菜单
                </template>
                <template v-if="props.row.menuType==0">
                  父菜单

                </template>
             
            </template>
          </el-table-column>
          <el-table-column prop="menuName" label="菜单名称"></el-table-column>
          <el-table-column prop="menuAlias" label="菜单别名"></el-table-column>
          <el-table-column prop="menuPath" label="菜单路径"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间"></el-table-column>

          <el-table-column fixed="right" width="300" label="操作" >
            <template slot-scope="scope">
              <el-button v-power functionCode="menu:delete" @click="deleteMenuById(scope.row)" type="danger" size="small">删除</el-button>
              <el-button v-power="scope.row.menuType!=2" functionCode="menu:update"  @click="openMenuInfoWindow(scope.row, 'updateInfo')" type="success" size="small" >编辑</el-button>
              <el-button v-power="scope.row.menuType==1" functionCode="menu:addfunction"  @click="addfunction(scope.row)" size="small">添加功能</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="添加功能" :visible.sync="addfunctionshow" width="30%">
          <el-form
          :model="menuForm"
          ref="functionForm"
          label-width="100px"
          class="demo-ruleForm">

      
          <el-form-item label="名称" prop="menuName">
            <el-input v-model="menuForm.menuName"></el-input>
          </el-form-item>
          <el-form-item label="别名" prop="menuAlias">
            <el-input v-model="menuForm.menuAlias"></el-input>
          </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="addfunctionshow = false">取 消</el-button>
          <el-button type="primary" @click="addMenuInfo('functionForm','addfunctionshow')">确 定</el-button>
        </span>
        </el-dialog>
      <!-- 添加弹出框 -->
      <el-dialog title="添加菜单" :visible.sync="menuAddWindow" width="30%">
        <el-form
          :model="menuForm"
          ref="menuForm"
          label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="父级菜单" prop="parentId">
            <el-input v-show="false" v-model="menuForm.parentId"></el-input>

            <el-popover
  placement="right"
  width="400"
  trigger="click">
  <el-tree :data="selectmenulist" :props="{children:'children',label:'menuName'}" @node-click="handleNodeClick"></el-tree>
  <el-button slot="reference" style="width:100%;">{{menuForm.parentName}}</el-button>
</el-popover>

          </el-form-item>
          <el-form-item v-show="false" label="菜单名称" prop="parentName">
            <el-input v-model="menuForm.menuName"></el-input>
          </el-form-item>
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="menuForm.menuName"></el-input>
          </el-form-item>


          <el-form-item label="菜单路径" prop="menuPath">
            <el-input v-model="menuForm.menuPath"></el-input>
          </el-form-item>


          <el-form-item label="菜单别名" prop="menuAlias">
            <el-input v-model="menuForm.menuAlias"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="menuAddWindow = false">取 消</el-button>
          <el-button type="primary" @click="addMenuInfo('menuForm','menuAddWindow')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 详情弹出框 -->
      <el-dialog title="修改菜单信息" :visible.sync="menuInfoWindow" width="30%">
        <el-form :model="menuInfo" ref="menuInfo" label-width="100px" class="demo-ruleForm">
<el-form-item  label="菜单名称" prop="parentName">
            <el-input v-model="menuInfo.menuName"></el-input>
          </el-form-item>
<el-form-item v-if="menuInfo.menuType==1" label="菜单路径" prop="menuPath">
            <el-input v-model="menuInfo.menuPath"></el-input>
          </el-form-item>
  <el-form-item label="菜单别名" prop="menuAlias">
            <el-input v-model="menuInfo.menuAlias"></el-input>
          </el-form-item>
          <el-form-item v-if="menuInfo.menuType!=2" label="菜单类型" >
            <el-radio-group :disabled="menuInfo.children.length!=0" v-model="menuInfo.menuType" style="margin-bottom: 20px;">
  <el-radio-button :label="1">菜单</el-radio-button>
  <el-radio-button :label="0">父菜单</el-radio-button>
</el-radio-group>
          </el-form-item>
      
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="menuInfoWindow = false">取 消</el-button>
          <el-button @click="updateMenuInfo('menuInfo')" :disabled="disable" type="primary">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
    <script>
export default {

  name: 'CarSharingMenu',
  data () {
    return {
      selectmenulist:[],
      addfunctionshow:false,
      disable: true,
      functionlist: [],
      menuName: '', // 用户姓名
      menuData: [], // 菜单查询数据
      menuAddWindow: false, // 菜单添加窗口控制
      menuInfoWindow: false, // 菜单信息窗口控制
      menuForm: {
        // 菜单添加对象
        menuName: '', // 菜单名称
        parentName: '请选择父级菜单',
        parentId: 0
      },
      menuInfo: {}, // 菜单信息
      menuInfo: {
        // 菜单添加对象
        menuName: '', // 菜单名称
        parentName: '请选择父级菜单',
        parentId: 0,
        children: []
      }, // 菜单信息
      pageSize: 10, // 每页显示的个数
      pageNum: 1, // 起始的页数 表格中当前页面
      total: 0
    }
  },
  computed:{
 
  },
  mounted () {
    this.queryMenuByName()
  },
  methods: {
    addfunction(row){
      this.menuForm={}
      this.menuForm.parentId=row.id
      this.menuForm.aa = row.menuAlias
      this.menuForm.parentName=row.menuName
      this.menuForm.menuType=2
      this.addfunctionshow = true
    },
    addFunctionflag(row){
      if(row.menuType==1){
        return true
      }
    },
    addmenuflag(row){
      if(row.type==0&&row.children.length==0){
        return true
      }else  if(row.type==0&& row.children[0].type==0){
        return true
      }else{
        return false
      }
    },
    menuInfoNodeClick (e) {
      console.log(e)
      this.menuInfo.parentId = e.id
      this.menuInfo.parentName = e.menuName
    },
    handleNodeClick (e) {
      console.log(e)
      this.menuForm.parentId = e.id
      this.menuForm.parentName = e.menuName
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.queryMenuByName()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.queryMenuByName()
      console.log(`当前页: ${val}`)
    },
    updateMenuInfo (formName) {
      this.$refs[formName].validate((valid) => {
        console.log(this.menuInfo)
        if (valid) {
          this.menuInfoWindow = false
          this.$axios
            .put(
              'menu/updateMenu',
              this.menuInfo
            )
            .then((res) => {
              if (res.status === 200) {
                
                this.myMessage('success', '恭喜您！成功修改了一条信息！')
                this.queryMenuByName()
                this.menuInfo={children:[]}
              } else {
                this.myMessage('warning', '警告喔！您有一条信息修改失败！')
              }
            })
            .catch((error) => {
              this.myMessage('error', '错误哦！系统错误，请联系管理员！')
              console.log(error)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    openMenuInfoWindow (row, windowType) {
      // eslint-disable-next-line eqeqeq
    
      // 打开修改或详情窗口
      this.menuInfo = JSON.parse(JSON.stringify(row))
      this.disable = windowType === 'getInfo'
      this.menuInfoWindow = true
    },
    deleteMenuById (id) {
      // 删除信息
      if(id.children.length>0){
        this.$message('请先把子节点清空');
      }else{

      this.$confirm('此操作将删除该菜单信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete('menu/delMenuById', {
              params: {
                id: id.id
              }
            })
            .then((res) => {
              if (res.status === 200) {
                this.myMessage('success', '您成功删除了一条信息！')
                this.queryMenuByName()
              } else {
                this.myMessage('warning', '警告喔！您有一条信息删除失败！')
              }
            })
            .catch((error) => {
              console.log(error)
              this.myMessage('error', '错误哦！系统错误，请联系管理员！')
            })
        })
        .catch((error) => {
          console.log(error)
          this.myMessage('info', '已取消')
        })
      }

    },
    queryMenuByName () {
      this.$axios
        .get('menu/getMenuNotFunction')
        .then((res) => {
          if (res.status === 200) {
            this.selectmenulist = res.data.data
          }
        })
        .catch((error) => {
          this.myMessage('error', '错误哦！系统错误，请联系管理员！')
          console.log(error)
        })
      // 查询菜单信息
      this.$axios
        .get('menu/getMenuAndFunction')
        .then((res) => {
          if (res.status === 200) {
            this.menuData = res.data.data
          }
        })
        .catch((error) => {
          this.myMessage('error', '错误哦！系统错误，请联系管理员！')
          console.log(error)
        })
    },
    addMenuInfo (formName,showflag) {
      // 添加
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              'menu/saveMenu',
              this.menuForm
            )
            .then((res) => {
              if (res.data.flag) {
                this.myMessage('success', '恭喜您！成功添加了一条信息！')
                this[showflag] = false
                this.menuForm={}
                this.$refs[formName].resetFields()
                this.queryMenuByName()
              } else {
                this.myMessage('warning', '警告喔！您有一条信息添加失败！')
              }
            })
            .catch((error) => {
              this.myMessage('error', '错误哦！系统错误，请联系管理员！')
              console.log(error)
            })
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    openAddWindow () {
      this.menuForm={parentId:0,parentName:''}
      // 打开添加窗口
      this.menuAddWindow = true
    },
    // 提示信息
    myMessage (type, message) {
      this.$message({
        showClose: true,
        message: message,
        type: type
      })
    },
    // 表格文字居中
    rowStyle (row) {
      if(row.row.menuType==1){
        console.log(row)
        return {'background-color':'rgb(233 233 233)'}
      }else if(row.row.menuType==2){
        return {'background-color':'rgb(193 193 193)'}

      }
      return 'text-align:center'
    },
    // 过滤树
    filterNode (value, data) {
      if (!value) return true
      return data.menuName.indexOf(value) !== -1
    }
  }
}
</script>

  <style lang="scss" scoped>
#ul1{
    height: 40px;
    margin-bottom: 15px;
    list-style: none;

  }
  #ul1 li{
    float: left;
    margin-right: 10px;
  }
  </style>